<template>
  <div class="title">
    <div class="title_top">
      待办事件
    </div>
    <a-spin :spinning="loading">
      <div>
        <a-tabs style="margin-top: 23px;" :animated="true">
          <a-tab-pane >
            <a-badge v-if="undoDataList" :count="undoDataList.length" slot="tab">
              <span>
                待处置
              </span>
            </a-badge>
          </a-tab-pane>
          <template #tabBarExtraContent>
            <div style="display: flex;flex-direction: row;align-items: center;" class="cursor_pointer" @click="gotoMorePage">
              <div style="margin-right:10px;font-size: 16px;">更多</div>
              <img src="@/assets/images/home/rarrow.png" alt="" style="height: 12px;width: 12px;">
            </div>
          </template>
        </a-tabs>
        <div v-if="undoDataList && undoDataList.length > 0" class="title_list">
          <div v-for="(item, index) in undoDataList" :key="index" @click="gotoUndoPage(item)">
            <div class="title_item">
              {{ formateLabel(item) }}
            </div>
          </div>
        </div>
        <div v-else>
          <a-empty style="margin-top:20px" />
        </div>
      </div>
    </a-spin>

  </div>

</template>
  <script >
  import { St_admreview } from '@/enumeration/St_admreview'
  import { queryList } from '@/api/correction/cre_warning.js'
  import { queryWorkList } from '@/api/correction/cre_work.js'
  import { APP_USER, APP_DEPT } from '@/store/mutation-types.js'
  import storage from 'store'
  import moment from 'moment'
  import { Tp_crc_warn } from '@/enumeration/correction/Tp_crc_warn.js'
  import { Decrypt } from '@/enumeration/SM.js'
  export default {
    name: 'LeftTop',
    data () {
      return {
        undoDataList: [],
        currentUser: storage.get(APP_USER), // 登录人信息
        currentDept: storage.get(APP_DEPT), // 登录人部门
        loading: false,
        St_admreview: St_admreview
      }
    },
    computed: {
    },

    created () {
      this.queryUndoEvent()
    },
    methods: {
      queryUndoEvent () {
        this.loading = true
        if (this.currentDept.sectionid == this.currentDept.id) {
          const params = {
            f_status: [6402200, 6402201],
            pageNumber: 1,
            pageSize: 9999
          }
          queryList(params)
            .then((res) => {
              if (res.code !== 0) {
                this.$message.error('查询待完成事项失败')
              } else {
                this.undoDataList = res.data.records
              }
            }).catch((err) => {
              this.undoDataList = []
              console.log(err, '查询待完成事项失败')
            }).finally(() => {
              this.loading = false
            })
        } else {
          const params = {
            f_status: [6402200, 6402201],
            pageNumber: 1,
            f_userid: this.currentUser.userId,
            pageSize: 9999
          }
          queryWorkList(params)
            .then((res) => {
              if (res.code !== 0) {
                this.$message.error('查询待完成事项失败')
              } else {
                this.undoDataList = res.data.records
              }
            }).catch((err) => {
              this.undoDataList = []
              console.log(err, '查询待完成事项失败')
            }).finally(() => {
              this.loading = false
            })
        }
      },
      formateLabel (item) {
        const result = '社矫对象：' + Decrypt(item.pername) + '于' + item.rectime + '违反' + Tp_crc_warn[item.type].name + '规则，请及时处理'
        return result
      },
      formateLabelDetail (item) {
        return item.describe
      },
      gotoMorePage () {
        if (this.currentDept.sectionid == this.currentDept.id) {
          this.$router.push({
            path: '/WorkWarningList'
          })
        } else {
          this.$router.push({
            path: '/WorkToDoList'
          })
        }
      },

      gotoUndoPage (record) {
        if (this.currentDept.sectionid == this.currentDept.id) {
          this.$router.push({
            path: `/WorkWarningDetail/${record.workid}/3`,
            query: {
              id: record.id
            }
          })
        } else {
          this.$router.push({
            path: `/WorkToDoDetail/${record.id}/4`,
            query: {
              id: record.id
            }
          })
        }
      }

    }
  }
  </script>

  <style  lang="less" scoped>
    .title {
      display: flex;
      flex-direction: column;

      .title_top {
        margin-top: 30px;
        padding-bottom: 16px;
        border-bottom: 3px solid #f5f5f5;
        font-size: 23px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #2c2c2c;
      }

      .title_list {
        max-height: 40vh;
        overflow: auto;
        width: 100%;
      }
      .title_item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: 1px solid #f5f5f5;

        .title_item_left {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #2c2c2c;
          width: 100%;
        }

        .title_item_left:hover {
          color: #1890ff;
        }
        .title_item_right {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #696969;
          width: 20%;
          direction: rtl;
          padding-right: 15px;
          min-width: 120px
        }

        .title_send_left {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #2c2c2c;
          width: 80%;
        }
        .title_send_left:hover {
          color: #1890ff;
        }
        .title_send_right {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #696969;
          width: 20%;
          direction: rtl;
          padding-right: 15px;
          min-width: 120px
        }
      }
    }

    ::v-deep .ant-tabs-tab-active {
      height: 45px;
      color: white;
      background: #0072c6;
      border-color: #0072c6;
    }

    ::v-deep .ant-tabs-tab {
      border-bottom-color: #0072c6;
      margin: 0px 10px 0px 0px;
      font-size: 16px;
    }

    ::v-deep .ant-tabs-bar {
      border-bottom: 1px solid #0072c6;
    }

    ::v-deep .ant-badge-count {
      top: -6px;
      right: -4px;
      z-index: auto;
      min-width: 10px;
      height: 16px;
      padding: 0px 6px;
      color: #fff;
      font-weight: normal;
      font-size: 12px;
      line-height: 16px;
      white-space: nowrap;
      text-align: center;
      background: #f5222d;
      border-radius: 10px;
      -webkit-box-shadow: 0 0 0 1px #fff;
      box-shadow: 0 0 0 1px #fff;

    }
    ::v-deep .ant-badge {
      font-size: 16px;
    }
  </style>
